<template>
    <div class="push-flow">
        <nav-header>
			<div class="zh-h5-nav">
				<div 
					:class="activePanel === 'flow' ? 'active' : ''"
					@click="changePanel('flow')">推流管理</div>
				<div 
					:class="activePanel === 'whitelist' ? 'active' : ''"
					@click="changePanel('whitelist')">白名单</div>
                <div 
                :class="activePanel === 'blacklist' ? 'active' : ''"
                @click="changePanel('blacklist')">黑名单</div>
			</div>

            <template slot="menuBefore">
                <div class="th-title-icon">
                    <el-button
                        @click="fieldsTips = true"
                        icon="el-icon-warning"
                        circle title="提示" size="mini" >
                    </el-button>
                </div>
            </template>
		</nav-header>

        <transition name="fade" mode="out-in" v-if="activePanel === 'flow'">
            <div class="zh-table">
                <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <el-table
                        :data="listData"
                        fixed
                        border
                        max-height="600"
                        style="width: 100%">
                        <el-table-column
                            prop="cid"
                            label="客户端id"
                            align="center"
                            width="100"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="ip"
                            label="推流ip"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="url"
                            label="推流地址"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="id"
                            label="流id"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="online"
                            label="持续时间"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            :width="320">
                            <template slot-scope="scope">
                                <el-button @click="previewImg(scope.row.pic)" type="text">图片</el-button>
                                <el-button @click="playVideo(scope.row.rtmp)" type="text">视频</el-button>
                                <el-button @click="kickConfirm(scope.row.cid)" type="text">临时踢出</el-button>
                                <el-button v-if="scope.row.in_white === 0" @click="whiteConfirm(scope.row.ip)" type="text">加白名单</el-button>
                                <el-button @click="blackConfirm(scope.row.ip)" type="text">加黑名单</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="table-pagination" v-show="totalNumber > 10">
                        <el-pagination
                            @size-change="changeCurrentSize"
                            @current-change="changeCurrentPage"
                            :current-page="listParam.pageIndex"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNumber">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </transition>
        
        <transition name="fade" mode="out-in" v-if="activePanel === 'whitelist'">
            <whiteList />
        </transition>

        <transition name="fade" mode="out-in" v-if="activePanel === 'blacklist'">
            <blackList />
        </transition>

        <transition name="el-fade-in-linear" >
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<liveView  v-if="showVideoPlayer" :playParam.sync="playParam" ></liveView>
					</div>
				</div>
			</div>
		</transition>

        <el-dialog
            title="提示"
            :visible.sync="fieldsTips"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="400px">
            <ul>
                <li style="list-style-type: disc;">1935端口 * <span style="color:#F56C6C">拉黑、踢出和取消踢出有一定的延迟</span></li>
            </ul>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>
    </div>
</template>

<script>
import whiteList from './whitelist';
import blackList from './blacklist';
import liveView from '../../public/liveView';

export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            isActive: true, // 视频预览
            showVideoPlayer: false, // 视频预览
            imgVisible: false, // 图片预览
            fieldsTips: false, // 注意事项
            totalNumber: 0, // 总条数
            imgViewUrl: '', // 图片地址
            activePanel: 'flow', // 默认标签
            listData: [], // 提醒列表
            playParam:{
                play_url: ''
            },
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
            listParam: {
                pageSize: 10,
                pageIndex: 1
            },
        }
    },
    created() {
        this.getList();
    },
    components: {
        whiteList,
        blackList,
        liveView
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 查看图片
         * @param {Object} obj 记录信息
         */
        previewImg(url) {
            this.imgViewUrl = this.BASE_URL + url;
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [this.BASE_URL + url];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        /**
         * 播放视频
         * @param {String} url 视频地址
         */
        playVideo(url) {
            this.playParam.play_url = url;
            this.showVideoPlayer = true;
            this.isActive = false;
        },
        /**
         * 关闭视频预览
         */
        viewClose(){
            this.showVideoPlayer = false;
            this.isActive = true;
        },
        /**
         * 获取强直播流列表
         */
        getList() {
            this.loading.status = true;

            let success = (res => {
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            let param = {
                page_size: this.listParam.pageSize,
                page_index: this.listParam.pageIndex
            }

            this.$ajax.get('api/stream/getList', {params: param, func:{success: success}})
        },
        /**
         * 重置列表
         */
        resetList() {
            this.listParam = {
                pageSize: 10,
                pageIndex: 1
            }

            this.getList();
        },
        /**
         * 确认是否临时踢出
         * @param {Number} id 记录id
         */
        kickConfirm(id) {
            let yes = (res => {
                this.loading.status = true;

                let success = (res => {
                    this.$message.success(res.msg);
                    
                    if (this.listData.length === 1) {
                        if (this.listParam.pageIndex > 1) {
                            this.listParam.pageIndex-- ;
                        } else {
                            this.listParam.pageIndex = 1;
                        }
                    }

                    this.getList();
                });
                let fail = (res =>{
                    this.$message.error(res.msg);

                    this.getList();
                }) 
                let params = {
                    client_id: id
                }
                
                this.$ajax.post('api/stream/tickIt', params, {func: {success: success, fail: fail}})
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否临时踢出'});
        },
        /**
         * 确认是否添加白名单
         * @param {Number} ip 记录 ip
         */
        whiteConfirm(ip) {
            let yes = (res => {
                this.handleData(ip, 'api/stream/whitelist');
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否添加白名单'});
        },
        /**
         * 确认是否添加黑名单
         * @param {Number} ip 记录ip
         */
        blackConfirm(ip) {
            let yes = (res => {
                this.handleData(ip, 'api/stream/blacklist');
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否添加黑名单'});
        },
        /**
         * 处理数据
         * @param {Number/Array} 要处理数据的 ip
         * @param {String} url api
         */
        handleData(ip, url) {
            this.loading.status = true;

            let success = (res => {
                console.log('133232')
                this.loading.status = false;
                this.$message.success(res.msg);
                
                if (this.listData.length === 1) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                this.$message.error(res.msg);

                this.getList();
            }) 
            
            this.$ajax.put(url, {ip}, {func: {success: success, fail: fail}})
        },
        /**
         * 切换标签页
         * @param {String} name 标签名字
         */
        changePanel(name) {
            this.activePanel  = name;

            if (name === 'flow') {
                this.resetList();
            }
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.push-flow {
    .th-title-icon {
        position: absolute;
        top: 0;
        right: 40px;
        
        i {
            color: #DAA017;
        }
    }

    .activeLive{
		opacity: 0;
		visibility: hidden;
	}

    .masking{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .5s;
		background: rgba(0,0,0,.3);
		z-index: 4;
		.maskingBox{
			position: absolute;
			top: 20%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}
		.masking_h{
			padding: 10px 15px;
			background: #348EFC;
			text-align: center;
			text-align-last: justify;
			>span,
			>i{
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}
			>i{
				cursor: pointer;
			}
		}
		.masking_c{
			padding: 30px;
		}

	}
}
</style>